
{literal}
<style type="text/css">
	.event_table{
		margin-bottom: 12px;
	}
	.event_table_left{
		float: left;
	}
	.event_table_right{
		padding-left: 100px;
	}
	
		.event_privacy_setting{
		    position: absolute !important;
		    right: 6px;
		    top: 17px;
		    width: 202px;
		}
		
		
#select_event_start .js_datepicker_image {
    height: 15px;
    left: 204px !important;
    overflow: hidden;
    position: absolute;
    top: 230px !important;
    width: 16px;
    z-index: 100;
}

.extra_info_event{
    position: absolute;
    right: 161px;
    top: 230px;
}
</style>
{/literal}

<form method="post" name="form_create_event" id="form_create_event">
<div class="event_table">
	<div class="event_table_left">Event's name</div>
	<div class="event_table_right">
		<input type="text" value="" name="val[title]" style="width: 250px;"/>
		<div class="event_privacy_setting">
			{module name='privacy.form' privacy_name='privacy' privacy_no_custom=true default_privacy='event.display_on_profile'}
			</div>
	</div>
</div>

<div class="event_table">
	<div class="event_table_left">Describe event</div>
	<div class="event_table_right">
		<textarea id="description" cols="50" rows="6" name="val[description]"></textarea>
	</div>
</div>

<div class="event_table">
	<div class="event_table_left">Location</div>
	<div class="event_table_right">
		<input type="text" value="" name="val[location]" style="width: 250px;"/>
	</div>
</div>

<div class="event_table">
	<div class="event_table_left">When</div>
	<div class="event_table_right" id="select_event_start">
		<div style="clear:none;"></div>
		{select_date prefix='start_' id='_start' start_year='current_year' end_year='+1' field_separator=' / ' field_order='MDY' default_all=true add_time=true start_hour='+1' time_separator='event.time_separator'}
		<div class="extra_info_event">
			<a href="#" onclick="$(this).parent().hide(); $('#js_event_add_end_time').show(); return false;">{phrase var='event.add_end_time'}</a>
		</div>
	</div>
</div>

<div class="event_table" id="js_event_add_end_time" style="display:none;">
			<div class="event_table_left">
				{phrase var='event.end_time'}:
			</div>
			<div class="event_table_right">
				<div style="position: relative;" class="js_event_select">
				{select_date prefix='end_' id='_end' start_year='current_year' end_year='+1' field_separator=' / ' field_order='MDY' default_all=true add_time=true start_hour='+4' time_separator='event.time_separator'}
				</div>
			</div>
		</div>	

<div class="event_table">
	<div class="event_table_left">Invite Friends</div>
	<div class="event_table_right">
		{module name='pages.share' type='feed' url=''}
	</div>
</div>

<div class="event_table">
	<div class="event_table_left"></div>
	<div class="event_table_right">
		<input type="submit" value="Create Event" class="button create_event" onclick="$('#form_create_event').ajaxCall('event.addEvent');return false;"/>
		<input type="submit" value="Cancel" onclick="tb_remove();" class="button cancel"/>
	</div>
</div>
</form>